<template>
  <div class="farmer-dashboard">
    <!-- 顶部导航栏 -->
    <div class="dashboard-header">
      <div class="header-left">
        <div class="logo">
          <i class="fas fa-leaf logo-icon"></i>
          <h1>农产品融销一体平台</h1>
          <button class="menu-btn" @click="drawer = true">
            <el-icon><Menu /></el-icon>
          </button>
        </div>
        <el-drawer v-model="drawer" :with-header="false" size="280px" >
          <div class="drawer-content">
            <div class="drawer-header">
              <i class="fas fa-leaf"></i>
              <h3>菜单导航</h3>
            </div>
            <div class="drawer-menu">
              <div class="drawer-menu">
                <div class="menu-item" @click="navigateTo('/')">
                  <i class="fas fa-home"></i>
                  <span>登陆界面</span>
                </div>
                <div class="menu-item" @click="navigateTo('/farmer/financingServer/financingProducts')">
                  <i class="fas fa-hand-holding-usd"></i>
                  <span>融资服务</span>
                </div>
                <div class="menu-item" @click="navigateTo('/farmer/productManagement/productTrading')">
                  <i class="fas fa-shopping-cart"></i>
                  <span>农产品交易</span>
                </div>
                <div class="menu-item" @click="navigateTo('/farmer/expertAssistance/agriculturalKnowledge')">
                  <i class="fas fa-user-tie"></i>
                  <span>专家助力</span>
                </div>
                <div class="menu-item" @click="navigateTo('/farmer/dataAnalysis')">
                  <i class="fas fa-chart-bar"></i>
                  <span>数据分析</span>
                </div>
                <div class="menu-item" @click="navigateTo('/community/index')">
                  <i class="fas fa-users"></i>
                  <span>用户社区</span>
                </div>
                <div class="menu-item" @click="navigateTo('/cropManagement/category')">
                  <i class="fas fa-seedling"></i>
                  <span>农作物管理</span>
                </div>
                <div class="menu-item" @click="navigateTo('/farmer/settings/basicInfo')">
                  <i class="fas fa-cog"></i>
                  <span>用户设置</span>
                </div>
                <div class="menu-item" @click="loginOut">
                  <i class="fas fa-sign-out-alt"></i>
                  <span>退出登录</span>
                </div>
              </div>
            </div>
          </div>
        </el-drawer>
        <div class="location">
          <i class="fas fa-map-marker-alt"></i>
          <span>{{ userLocation }}</span>
        </div>
      </div>
      <div class="header-right">
        <div class="user-info">
          <div class="user-avatar">
            <img :src="user.avatar" :alt="user.name">
          </div>
          <div class="user-details">
            <div class="user-name">{{ user.name }}</div>
            <div class="user-role">认证农夫</div>
          </div>
        </div>
        <button class="btn-notification">
          <i class="fas fa-bell"></i>
          <span class="notification-badge" v-if="unreadNotifications > 0">
            {{ unreadNotifications }}
          </span>
        </button>
      </div>
    </div>

    <div class="dashboard-content">
      <!-- 左侧主要内容区 -->
      <div class="main-content">
        <!-- 欢迎区域 -->
        <div class="welcome-section">
          <div class="welcome-text">
            <h2>您好，{{ user.name }}！</h2>
          </div>
          <div class="date-display">
            {{ currentDate }}
          </div>
        </div>

        <!-- 关键指标 -->
        <div class="metrics-grid">
          <div class="metric-card" @click="navigateTo('/cropManagement/management')">
            <div class="metric-icon">
              <i class="fas fa-seedling"></i>
            </div>
            <div class="metric-content">
              <div class="metric-value">{{ farmStats.activeCrops }}</div>
              <div class="metric-label">农作物种类</div>
            </div>
          </div>
          
          <div class="metric-card" @click="navigateTo('/farmer/expertAssistance/qa')">
            <div class="metric-icon ai">
              <i class="fas fa-lightbulb"></i>
            </div>
            <div class="metric-content">
              <div class="metric-value">{{ farmStats.aiInsights }}</div>
              <div class="metric-label">专家建议</div>
            </div>
          </div>
          
          <div class="metric-card" @click="navigateTo('/farmer/financingServer/myApplications')">
            <div class="metric-icon">
              <i class="fas fa-tasks"></i>
            </div>
            <div class="metric-content">
              <div class="metric-value">审核中</div>
              <div class="metric-label">贷款申请进度</div>
            </div>
          </div>
          
          <div class="metric-card" @click="navigateTo('/farmer/productManagement/productOrder')">
            <div class="metric-icon">
              <i class="fas fa-shopping-cart"></i>
            </div>
            <div class="metric-content">
              <div class="metric-value">{{ farmStats.pendingOrders }}</div>
              <div class="metric-label">待处理订单</div>
            </div>
          </div>
        </div>

        <!-- 快速操作 -->
        <div class="quick-actions-section">
          <h3>快速操作</h3>
          <div class="actions-grid">
            <div class="action-card" @click="navigateTo('financingServer/financingProducts')">
              <div class="action-icon financing">
                <i class="fas fa-hand-holding-usd"></i>
              </div>
              <div class="action-content">
                <div class="action-title">融资服务</div>
                <div class="action-desc">申请贷款&nbsp;&nbsp;联合借贷</div>
              </div>
            </div>
            
            <div class="action-card" @click="navigateTo('productManagement/productTrading')">
              <div class="action-icon transaction">
                <i class="fas fa-shopping-cart"></i>
              </div>
              <div class="action-content">
                <div class="action-title">农产品交易</div>
                <div class="action-desc">出售农产品&nbsp;&nbsp;交易订单</div>
              </div>
            </div>
            
            <div class="action-card" @click="navigateTo('expertAssistance/agriculturalKnowledge')">
              <div class="action-icon expert">
                <i class="fas fa-user-tie"></i>
              </div>
              <div class="action-content">
                <div class="action-title">专家助力</div>
                <div class="action-desc">咨询专家&nbsp;&nbsp;农业知识学习</div>
              </div>
            </div>
            
            <div class="action-card" @click="navigateTo('dataAnalysis')">
              <div class="action-icon data-analysis">
                <i class="fas fa-chart-bar"></i>
              </div>
              <div class="action-content">
                <div class="action-title">数据分析</div>
                <div class="action-desc">作物价格分析&nbsp;&nbsp;交易趋势</div>
              </div>
            </div>

            <div class="action-card" @click="navigateToCropManagement">
              <div class="action-icon crops-management">
                <i class="fas fa-seedling"></i>
              </div>
              <div class="action-content">
                <div class="action-title">农作物管理</div>
                <div class="action-desc">管理作物&nbsp;&nbsp;库存监控</div>
              </div>
            </div>

             <div class="action-card" @click="navigateToCommunity">
              <div class="action-icon users-community">
                <i class="fas fa-users"></i>
              </div>
              <div class="action-content">
                <div class="action-title">用户社区</div>
                <div class="action-desc">加入社区&nbsp;&nbsp;互动交流</div>
              </div>
            </div>

            <div class="action-card" @click="navigateTo('settings/basicInfo')">
              <div class="action-icon user-settings">
                <i class="fas fa-cog"></i>
              </div>
              <div class="action-content">
                <div class="action-title">用户设置</div>
                <div class="action-desc">个人信息&nbsp;&nbsp;安全设置</div>
              </div>
            </div>

            <div class="action-card" @click="loginOut">
              <div class="action-icon logout">
                <i class="fas fa-sign-out-alt"></i>
              </div>
              <div class="action-content">
                <div class="action-title">退出登录</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 农场概览 -->
        <div class="farm-overview-section">
          <h3>收入概览</h3>
          <div class="overview-grid">
            <div class="revenue-card">
              <div class="card-header">
                <h4>本月收入</h4>
                <i class="fas fa-yen-sign"></i>
              </div>
              <div class="revenue-amount">¥{{ monthlyRevenue.toLocaleString() }}</div>
              <div class="revenue-trend">
                <span class="trend-up">↑ 12.5%</span> 相比上月
              </div>
            </div>
            
            <div class="crops-card">
              <div class="card-header">
                <h4>主要作物价格趋势</h4>
              </div>
              <div class="crops-list">
                <div class="crop-item" v-for="crop in mainCrops" :key="crop.id">
                  <div class="crop-image">
                    <img :src="crop.image" :alt="crop.name">
                  </div>
                  <div class="crop-info">
                    <div class="crop-name">{{ crop.name }}</div>
                    <div class="crop-health">
                      <div class="health-bar">
                        <div 
                          class="health-progress" 
                          :style="{ width: crop.health + '%' }"
                          :class="getHealthClass(crop.health)"
                        ></div>
                      </div>
                      <span class="health-value">{{ crop.health }}%</span>
                    </div>
                  </div>
                  <div class="crop-revenue">
                    <div class="revenue">¥{{ crop.dailyRevenue }}/天</div>
                    <div class="growth" :class="crop.growth >= 0 ? 'positive' : 'negative'">
                      {{ crop.growth >= 0 ? '+' : '' }}{{ crop.growth }}%
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧边栏 -->
      <div class="sidebar">
        <!-- 今日天气 -->
        <div class="weather-card">
          <div class="weather-header">
            <h4>今日天气</h4>
            <div class="weather-condition">{{ weather.condition }}</div>
          </div>
          <div class="weather-main">
            <div class="temperature">{{ weather.temperature }}°C</div>
            <div class="weather-icon">
              <i :class="getWeatherIcon(weather.condition)"></i>
            </div>
          </div>
          <div class="weather-details">
            <div class="weather-item">
              <i class="fas fa-tint"></i>
              <span>湿度 {{ weather.humidity }}%</span>
            </div>
            <div class="weather-item">
              <i class="fas fa-wind"></i>
              <span>风速 {{ weather.windSpeed }} km/h</span>
            </div>
            <div class="weather-item">
              <i class="fas fa-cloud-rain"></i>
              <span>降水 {{ weather.precipitation }}mm</span>
            </div>
          </div>
        </div>

        <!-- AI智能建议 -->
        <div class="ai-insights-card">
          <div class="card-header">
            <h4>AI智能建议</h4>
            <i class="fas fa-robot"></i>
          </div>
          <div class="insights-list">
            <div class="insight-item" v-for="insight in aiInsights" :key="insight.id">
              <div class="insight-icon">
                <i :class="insight.icon"></i>
              </div>
              <div class="insight-content">
                <div class="insight-title">{{ insight.title }}</div>
                <div class="insight-desc">{{ insight.description }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 快速社区入口 -->
        <div class="community-card">
          <div class="card-header">
            <h4>社区动态</h4>
            <i class="fas fa-users"></i>
          </div>
          <div class="community-stats">
            <div class="community-stat">
              <div class="stat-value">{{ communityStats.newPosts }}</div>
              <div class="stat-label">今日新帖</div>
            </div>
            <div class="community-stat">
              <div class="stat-value">{{ communityStats.newMessages }}</div>
              <div class="stat-label">未读消息</div>
            </div>
          </div>
          <button class="btn-community" @click="navigateToCommunity">
            <i class="fas fa-comments"></i>
            进入社区交流
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import {ElMessage,ElMessageBox} from 'element-plus'
const drawer = ref(false)
const userLocation = ref('北京, 顺义区')

// 用户信息
const user = ref({
  name: '张大山',
  avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80'
})

// 农场统计数据
const farmStats = ref({
  activeCrops: 3,
  aiInsights: 12,
  farmArea: 8.5,
  pendingOrders: 5
})

// 当前日期
const currentDate = computed(() => {
  const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }
  return new Date().toLocaleDateString('zh-CN', options)
})

// 月度收入
const monthlyRevenue = ref(68400)

// 主要作物数据
const mainCrops = ref([
  { 
    id: 1, 
    name: '西红柿', 
    health: 85, 
    dailyRevenue: 1850, 
    growth: 12,
    image: 'https://images.unsplash.com/photo-1546470427-e212b7d31075?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80'
  },
  { 
    id: 2, 
    name: '黄瓜', 
    health: 92, 
    dailyRevenue: 1200, 
    growth: 8,
    image: 'https://images.unsplash.com/photo-1571575173700-afb9492e6a50?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80'
  },
  { 
    id: 3, 
    name: '草莓', 
    health: 78, 
    dailyRevenue: 950, 
    growth: -2,
    image: 'https://images.unsplash.com/photo-1464454709131-ffd692591ee5?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80'
  }
])

// 天气信息
const weather = ref({
  condition: '晴天',
  temperature: 25,
  humidity: 60,
  windSpeed: 10,
  precipitation: 0
})

// AI建议
const aiInsights = ref([
  {
    id: 1,
    icon: 'fas fa-tint',
    title: '优化灌溉时间',
    description: '智能灌溉可减少15%用水量'
  },
  {
    id: 2,
    icon: 'fas fa-bug',
    title: '病虫害预警',
    description: '建议本周进行病虫害防治'
  },
  {
    id: 3,
    icon: 'fas fa-sun',
    title: '采收建议',
    description: '西红柿预计3天后达到最佳采收期'
  },
  {
    id: 4,
    icon: 'fas fa-leaf',
    title: 'fertility建议',
    description: '建议本周进行施肥'
  },
  {
    id: 5,
    icon: 'fas fa-user-lock',
    title: '玩游戏',
    description: '好玩爱玩多玩'
  }
])

// 社区统计
const communityStats = ref({
  newPosts: 10,
  newMessages: 5
})

// 未读通知
const unreadNotifications = ref(3)

// 方法
const getWeatherIcon = (condition) => {
  const icons = {
    '晴': 'fas fa-sun',
    '多云': 'fas fa-cloud-sun',
    '阴': 'fas fa-cloud',
    '雨': 'fas fa-cloud-rain',
    '雪': 'fas fa-snowflake'
  }
  return icons[condition] || 'fas fa-cloud-sun'
}

const getHealthClass = (health) => {
  if (health >= 80) return 'excellent'
  if (health >= 60) return 'good'
  if (health >= 40) return 'fair'
  return 'poor'
}

const router = useRouter()
const navigateTo = (destination) => {
  console.log('导航到:', destination)
  router.push(destination)
  drawer.value = false
}

const navigateToCommunity = () => {
  router.push('/community/index')
  console.log('进入社区...')
}

const navigateToCropManagement = () => {
  router.push('/cropManagement/category')
  console.log('进入农作物管理...')
}

//退出登录
const loginOut = ()=>{
  //弹出确认框
  ElMessageBox.confirm('你确认退出登录吗?','提示',
    {confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning'}
  ).then(async() => {//点击确认按钮
      ElMessage({
        type: 'success',
        message: '退出登录成功'
      });
      //清空本地存储
      localStorage.removeItem('loginUser');
      localStorage.removeItem('token');
      sessionStorage.clear();
      //跳转到登录页面
      router.push('/');
    }).catch(() => {//点击取消按钮
      ElMessage({
        type: 'info',
        message: '你已取消退出'
      })
    })
}
</script>

<style scoped>
.farmer-dashboard {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.dashboard-header {
  background: linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%);
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 30px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo h1 {
  color: white;
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
}

.logo-icon {
  font-size: 1.8rem;
  color: #FFD54F;
}

.menu-btn {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.15);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-btn:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.05);
}

.location {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.9);
  font-size: 0.9rem;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.3);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-details {
  color: white;
}

.user-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.user-role {
  font-size: 0.8rem;
  opacity: 0.8;
}

.btn-notification {
  position: relative;
  background: rgba(255,255,255,0.15);
  border: none;
  font-size: 1.2rem;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.btn-notification:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.05);
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #f44336;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* 抽屉样式 */
.drawer-content {
  padding: 20px;
}

.drawer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 20px;
}

.drawer-header i {
  color: #4CAF50;
  font-size: 1.5rem;
}

.drawer-header h3 {
  margin: 0;
  color: #333;
  font-weight: 600;
}

.drawer-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #555;
}

.menu-item:hover {
  background: #f0f7f0;
  color: #4CAF50;
  transform: translateX(5px);
}

.menu-item i {
  width: 20px;
  text-align: center;
}

.dashboard-content {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.welcome-section {
  background: white;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text h2 {
  color: #2E7D32;
  margin: 0 0 8px 0;
  font-size: 1.8rem;
  font-weight: 600;
}

.welcome-text p {
  color: #666;
  margin: 0;
  font-size: 1rem;
}

.date-display {
  color: #888;
  font-size: 1rem;
  font-weight: 500;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.metric-card {
  background: white;
  padding: 24px 20px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.05);
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.metric-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #E8F5E9;
  color: #4CAF50;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  transition: all 0.3s ease;
}

.metric-card:hover .metric-icon {
  transform: scale(1.1);
}

.metric-icon.ai {
  background: #E3F2FD;
  color: #2196F3;
}

.metric-value {
  font-size: 2rem;
  font-weight: 700;
  color: #2E7D32;
  line-height: 1;
}

.metric-label {
  color: #666;
  font-size: 0.9rem;
  margin-top: 6px;
  font-weight: 500;
}

.quick-actions-section {
  background: white;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.quick-actions-section h3 {
  color: #2E7D32;
  margin: 0 0 6px 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.quick-actions-section > p {
  color: #666;
  margin: 0 0 24px 0;
  font-size: 0.95rem;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.action-card {
  background: #f8f9fa;
  padding: 22px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.action-card:hover {
  background: white;
  border-color: #4CAF50;
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(76, 175, 80, 0.15);
}

.action-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.action-card:hover .action-icon {
  transform: scale(1.1);
}

.action-icon.financing { background: #E8F5E9; color: #acca05; }
.action-icon.transaction { background: #E3F2FD; color: #2196F3; }
.action-icon.expert { background: #FFF3E0; color: #FF9800; }
.action-icon.data-analysis { background: #F3E5F5; color: #9C27B0; }
.action-icon.crops-management { background: #E8F5E9; color: #4CAF50; }
.action-icon.users-community { background: #E1F5FE; color: #03A9F4; }
.action-icon.user-settings { background: #d6c2c2; color: #585159; }
.action-icon.logout { background: #ffcccc; color: #cc0000; }

.action-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
  font-size: 1rem;
}

.action-desc {
  color: #666;
  font-size: 0.82rem;
  line-height: 1.4;
}

.farm-overview-section {
  background: white;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.farm-overview-section h3 {
  color: #2E7D32;
  margin: 0 0 24px 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.revenue-card, .crops-card {
  background: #f8f9fa;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.card-header h4 {
  margin: 0;
  color: #333;
  font-size: 1.1rem;
  font-weight: 600;
}

.card-header i {
  color: #4CAF50;
  font-size: 1.3rem;
}

.revenue-amount {
  font-size: 2.4rem;
  font-weight: 700;
  color: #2E7D32;
  margin-bottom: 12px;
}

.revenue-trend {
  color: #666;
  font-size: 0.9rem;
}

.trend-up {
  color: #4CAF50;
  font-weight: 600;
}

.crops-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.crop-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.crop-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.crop-image {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #f0f0f0;
}

.crop-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crop-info {
  flex-grow: 1;
}

.crop-name {
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  font-size: 1rem;
}

.crop-health {
  display: flex;
  align-items: center;
  gap: 12px;
}

.health-bar {
  width: 100px;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
}

.health-progress {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.health-progress.excellent { background: #4CAF50; }
.health-progress.good { background: #8BC34A; }
.health-progress.fair { background: #FFC107; }
.health-progress.poor { background: #f44336; }

.health-value {
  font-size: 0.8rem;
  color: #666;
  min-width: 35px;
  font-weight: 500;
}

.crop-revenue {
  text-align: right;
  flex-shrink: 0;
}

.revenue {
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.growth {
  font-size: 0.8rem;
  font-weight: 600;
}

.growth.positive { color: #4CAF50; }
.growth.negative { color: #f44336; }

/* 侧边栏样式 */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.weather-card, .ai-insights-card, .community-card {
  background: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.weather-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.weather-header h4 {
  margin: 0;
  color: #333;
  font-size: 1.1rem;
  font-weight: 600;
}

.weather-condition {
  color: #666;
  font-size: 0.9rem;
  font-weight: 500;
}

.weather-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.temperature {
  font-size: 2.8rem;
  font-weight: 700;
  color: #2E7D32;
}

.weather-icon {
  font-size: 3.2rem;
  color: #2196F3;
}

.weather-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.weather-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #666;
  font-size: 0.9rem;
  padding: 8px 0;
}

.weather-item i {
  width: 16px;
  color: #4CAF50;
}

.insights-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.insight-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.insight-item:hover {
  background: #f0f7f0;
  transform: translateX(4px);
}

.insight-icon {
  width: 40px;
  height: 40px;
  background: #E8F5E9;
  color: #4CAF50;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.insight-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
  font-size: 0.92rem;
}

.insight-desc {
  color: #666;
  font-size: 0.82rem;
  line-height: 1.4;
}

.community-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0;
}

.community-stat {
  text-align: center;
  padding: 18px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.community-stat:hover {
  background: #f0f7f0;
  transform: scale(1.05);
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2E7D32;
  margin-bottom: 6px;
}

.stat-label {
  color: #666;
  font-size: 0.82rem;
  font-weight: 500;
}

.btn-community {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-community:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .metrics-grid,
  .actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .dashboard-content {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }
  
  .header-left {
    gap: 20px;
  }
  
  .logo h1 {
    font-size: 1.2rem;
  }
}

@media (max-width: 768px) {
  .dashboard-header {
    padding: 15px 20px;
    flex-direction: column;
    gap: 15px;
  }
  
  .header-left {
    width: 100%;
    justify-content: space-between;
  }
  
  .location {
    display: none;
  }
  
  .metrics-grid,
  .actions-grid {
    grid-template-columns: 1fr;
  }
  
  .welcome-section {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .dashboard-content {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .farmer-dashboard {
    padding: 0;
  }
  
  .dashboard-header {
    padding: 12px 15px;
  }
  
  .logo h1 {
    font-size: 1.1rem;
  }
  
  .user-details {
    display: none;
  }
  
  .metric-card, .action-card, .weather-card, 
  .ai-insights-card, .community-card, 
  .farm-overview-section, .quick-actions-section {
    padding: 20px;
  }
}
</style>